<template>
  <div class="tournament-card">
    <div
      v-for="(item, index) in tournaments"
      :key="index"
      class="tournament-item"
      @click="toEventDetail(item)" 
    >
      <div class="left-section">
        <p class="round">{{ item.round }}</p>
        <p class="prize">
          奖金<br /><span>{{ item.prize }}</span>
        </p>
      </div>
      <div class="middle-section">
        <p class="title">{{ item.name }}</p>
        <p class="details">开始时间：{{ item.startTime }}</p>
        <p class="details">
          <span class="details_buyIn">买入：{{ item.buyIn }}</span>
          <span class="details_people">
            <img src="/imgs/club/people.png" alt="people-icon" />
            {{ item.people }}
          </span>
        </p>
      </div>
      <div class="right-section" :class="getStatusClass(item.status)">
        <!-- 状态显示 -->
        <div
          class="status"
          v-if="item.status !== 5 && item.remainingTimeType !== 3"
          :class="getStatusClass(item.status)"
        >
          <template v-if="item.remainingTimeType === 0">报名</template>
          <template v-else-if="item.remainingTimeType === 1">报名</template>
          <template v-else-if="item.remainingTimeType === 2">延迟报名</template>
          <template v-else-if="item.status === 4">已暂停</template>
        </div>

        <!-- 状态内容 -->
        <div class="status-cont" :class="getStatusClass(item.status)">
          <span class="status-cont-not" v-if="item.remainingTimeType === 0">未开始</span>
          <span class="status-cont-ended" v-else-if="item.remainingTimeType === 1">
            距离开启<br />{{ item.remainingTime }}
          </span>
          <span class="status-cont-ended" v-else-if="item.remainingTimeType === 2">
            距离关闭<br />{{ item.remainingTime }}
          </span>
          <span class="status-cont-active" v-else-if="item.remainingTimeType === 3">进行中</span>
          <span class="status-cont-active" v-else-if="item.remainingTimeType === 5">已结束</span>
          <span class="status-cont-ended" v-else-if="item.status === 4">
            剩余时间<br />{{ item.remainingTime }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// Props 接收比赛数据
const props = defineProps<{
  tournaments: any[];
}>();

/**
 * 状态对应数字含义：
 * 0: 未开始
 * 1: 距离开始
 * 2: 延迟报名
 * 3: 进行中
 * 4: 已暂停
 * 5: 已结束
 */

// 根据状态返回对应的类名
const getStatusClass = (status: number) => {
  switch (status) {
    case 3:
      return "active";
    case 2:
      return "delayed";
    case 4:
      return "paused";
    case 5:
      return "ended";
    case 1:
      return "countdown";
    case 0:
      return "not-started";
    default:
      return "";
  }
};

const updateTimers = () => {
  const currentTime = new Date().getTime();

  props.tournaments.forEach((tournament) => {
    const startTime = new Date(tournament.startTime).getTime();
    const sixHoursBeforeStart = startTime - 6 * 60 * 60 * 1000;
    const twentyMinutesAfterStart = startTime + 20 * 60 * 1000;

    if (currentTime < sixHoursBeforeStart) {
      // 未开始
      tournament.remainingTimeType = 0;
      tournament.remainingTime = "";
    } else if (currentTime >= sixHoursBeforeStart && currentTime < startTime) {
      // 距离开始
      const remainingTimeInSeconds = (startTime - currentTime) / 1000;
      tournament.remainingTimeType = 1;
      tournament.remainingTime = formatTime(remainingTimeInSeconds);
    } else if (currentTime >= startTime && currentTime <= twentyMinutesAfterStart) {
      // 延迟报名
      const remainingTimeInSeconds = (twentyMinutesAfterStart - currentTime) / 1000;
      tournament.remainingTimeType = 2;
      tournament.remainingTime = formatTime(remainingTimeInSeconds);
    } else if (currentTime > twentyMinutesAfterStart && tournament.status === 3) {
      // 进行中
      tournament.remainingTimeType = 3;
      tournament.remainingTime = "";
    } else if (tournament.status === 4) {
      // 已暂停，计算剩余时间
      const remainingTimeInSeconds = (twentyMinutesAfterStart - currentTime) / 1000;
      tournament.remainingTimeType = 4;
      tournament.remainingTime = formatTime(remainingTimeInSeconds);
    } else {
      // 比赛已结束
      tournament.remainingTimeType = 5;
      tournament.remainingTime = "";
    }
  });
};

// 时间格式化函数
const formatTime = (seconds: number) => {
  const minutes = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
};

const toEventDetail = (item: any) => {
  console.log('item', item)
  router.push("/club/eventDetails");
}

// 设置定时器，实时更新倒计时
const interval = ref<any>(null);
onMounted(() => {
  interval.value = setInterval(updateTimers, 1000);
});

onUnmounted(() => {
  if (interval.value) clearInterval(interval.value);
});
</script>


<style lang="scss" scoped>
.tournament-card {
  width: 347px;
  margin: 0 auto 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  // padding: 10px;

  .tournament-item {
    width: 347px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(19, 18, 50, 0.00) 0%, #2F2D6C 100%), #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    color: #fff;

    .left-section {
      flex: 1;
      text-align: center;

      .round {
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        font-weight: 400;
        color: #f39c12;
        margin-bottom: 2px;
      }
      .prize {
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        
        span {
          display: block;
          margin-top: 6px;
          color: #F3C552;
          font-size: 12px;
          font-weight: 600;
        }
      }
    }

    .middle-section {
      flex: 2;
      padding: 0 10px;
      font-size: 12px;
      color: #A8A8CA;
      .title {
        height: 22px;
        color: #FFF;
        font-size: 12px;
        font-weight: 500;
        line-height: 28px;
        text-indent: 25px;
        background: url(/imgs/club/eventBg.png) no-repeat;
        background-size: 100% 100%;
      }
      
      .details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 4px 0 0px;
        width: 138px;
        white-space: nowrap;       /* 不换行 */
        overflow: hidden;          /* 隐藏超出内容 */
        text-overflow: ellipsis;   /* 显示省略号 */

        .details_people {
          color: #1DBA8B;
          font-size: 12px;
          img {
            width: 16px;
            height: 16px;
            vertical-align: bottom;
          }
        }
      }
    }

    .right-section {
      width: 90px;
      height: 62px;
      text-align: center;
      border-radius: 8px;
      background: #0A0B27;

      .status {
        height: 20px;
        font-size: 14px;
        color: #fff;

        &.not-started {
          background-color: #1DBA8B;
        }
        &.active {
          background-color: #F49A24;
        }
        &.delayed {
          background-color: #DF393D;
        }
        &.paused {
          background-color: #7B79BD;
        }
        &.ended {
          background-color: #B2B2B2;
        }
      }

      .status-cont {
        height: 38px;
        font-size: 12px;
        .status-cont-not {
          line-height:38px;
        }
        .status-cont-active {
          line-height:62px;
        }
        .status-cont-ended {
          display: block;
          margin-top: 4px;
        }
        &.not-started {
          color: #1DBA8B;
        }
        &.active {
          color: #F49A24;
        }
        &.delayed {
          color: #DF393D;
        }
        &.paused {
          color: #7B79BD;
        }
        &.ended {
          color: #B2B2B2;
        }
      }

      &.not-started {
        border: 3px solid #1DBA8B;
      }
      &.active {
        border: 3px solid #F49A24;
      }
      &.delayed {
        border: 3px solid #DF393D;
      }
      &.paused {
        border: 3px solid #7B79BD;
      }
      &.ended {
        border: 3px solid #B2B2B2;
      }
    }
  }
}
</style>
